<template>
	<Layout class="layout">
    <Header></Header>
    <Layout>
    <Sider hide-trigger>
    	<Menu accordion :active-name="menuActiveName" theme="dark" width="auto" :open-names="$route.meta.openNames" @on-select="toRouter">
        <Submenu name="1">
	        <template slot="title">
            <Icon type="ios-navigate"></Icon>
            Item 1
	        </template>
	        <MenuItem name="page1">page1</MenuItem>
	        <MenuItem name="page2">page2</MenuItem>
        </Submenu>
        <Submenu name="2">
	        <template slot="title">
            <Icon type="ios-keypad"></Icon>
            Item 2
	        </template>
	        <MenuItem name="page3">page3</MenuItem>
        </Submenu>
        <Submenu name="3">
	        <template slot="title">
            <Icon type="ios-analytics"></Icon>
            Item 3
	        </template>
	        <MenuItem name="page4">page4</MenuItem>
        </Submenu>
    	</Menu>
    </Sider>
    <Content>
      <router-view></router-view>
    </Content>
  </Layout>
</Layout>
</template>

<script>

let that = null;
	
export default {
  name: 'layout',
  data () {
    return {
      menuActiveName: 'page1',
    }
  },
  created () {
  	that = this;
  },
  methods: {
  	toRouter (url) {
  		this.$router.push({path: '/' + url});
  	}
  },
  beforeRouteEnter(to, from, next) {
    next(that => {
      that.menuActiveName = to.name
    });
  },
  beforeRouteUpdate(to, from, next) {
    that.menuActiveName = to.name
    next();
  }
}
</script>

<style rel="stylesjeet/scss" lang="scss" scoped>
.layout {
	height: 100%;
	background: #f5f7f9;
	position: relative;
	overflow: hidden;
	.ivu-layout {
		height: 100%;
	}
	.ivu-layout-sider {
		background: #495060;
	}
	.ivu-layout-content{
		padding: 20px;
	}
}
</style>